<template>
    <div>
        <base-list ref="jobTable" :condition="condition" :datas.sync="jobTable" :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="110px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="计划状态">
                            <el-select v-model="checkStatus" multiple placeholder="请选择" @change="chooseStatus" clearable>
                                <el-option v-for="[key, val] in _dictPlanStatus" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="isTransport" :span="8">
                        <el-form-item label="运输方式">
                            <el-select v-model="condition['search_EQ_transportMode']" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictTransportModeType" :key="key" :label="val"
                                           :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="预计作业日期">
                            <date-slot :startDate.sync="condition.search_GTE_planJobDate"
                                       :endDate.sync="condition.search_LTE_planJobDate" dateType="yyyy-MM-dd"
                                       middle="至"></date-slot>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-button type="primary" icon="el-icon-search" @click="loadData" class="ml-110">查 询</el-button>
                        <el-button type="primary" @click="loadData">刷 新</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table slot="list" :data="jobTable" border stripe max-height="500" show-summary>
                <el-table-column prop="planNo" label="计划单号"  min-width="210">
                    <template slot-scope="scope">
                        <a @click="handleGetDetail(scope.row.planNo, 2)" style="color: blue">{{ scope.row.planNo }}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="planType" label="计划类型"  min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.planType | _filterPlanType }}
                    </template>
                </el-table-column>
                <el-table-column v-if="isTransport" prop="transportMode" label="运输方式" 
                                 min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.transportMode | _filterTransportModeType }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="packingWay" label="包装方式"  min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.packingWay | _filterPackingWay }}
                    </template>
                </el-table-column> -->
                <el-table-column prop="noJobNum" label="未作业数量"  min-width="80"></el-table-column>
                <el-table-column prop="containerNum" label="预计作业数量"  min-width="80"></el-table-column>
                <el-table-column prop="planJobDate" label="预计作业日期"  min-width="140"></el-table-column>
                <el-table-column prop="planStatus" label="计划状态"  min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.planStatus | _filterPlanStatus }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作"  width="140" v-if="this.condition.search_EQ_planType==='NZCC'">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" :disabled="scope.row.planPush==='SUCCESS'" @click="handelCall(scope.row)">
                            计划推送
                        </el-button>
                        <el-button size="small" type="text" 
                                :disabled="scope.row.planStatus!=='OPERATING'"
                                @click="handleGetDetail(scope.row.planNo, 3)">处理
                        </el-button>
                        <el-button type="text"  class="danger"
                                :disabled="scope.row.planStatus!=='NOOPERATE'" size="small" 
                                @click="handleRemove(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" align="center" label="操作"  width="140">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" 
                                :disabled="scope.row.planStatus!=='OPERATING'"
                                @click="handleGetDetail(scope.row.planNo, 3)">处理
                        </el-button>
                        <el-button type="text"  class="danger"
                                :disabled="scope.row.planStatus!=='NOOPERATE'" size="small" 
                                @click="handleRemove(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </base-list>
        <el-dialog title="计划详情页" :visible.sync="dialogForm" width="1000px">
            <h3>基础信息</h3>
            <base-info :form="baseForm"></base-info>
            <h3>集装箱明细</h3>
            <container-table :form="baseForm" ref="table" :showF='showF'></container-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogForm = false">取 消</el-button>
                <el-button type="primary" @click="dialogForm=false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { jobPlanBaseInfo, jobPlanList,callJNInYard,delPlan } from "@/api/jobPlan/jobPlan";
    import dateSlot from '@/components/date/dateSlot'
    import baseInfo from './baseInfo'
    import containerTable from './containerTable'
    import { getLocalTime, mGetDate } from "@/utils/dateFormat";

    export default {
        name: "jobTable",
        components: { dateSlot, baseInfo, containerTable },
        data() {
            return {
                condition: {
                    search_IN_planStatus: '',
                    search_EQ_transportMode: '',
                    search_EQ_planType: '',
                    search_GTE_planJobDate: '',
                    search_LTE_planJobDate: '',
                },                      // 查询条件
                jobTable: [],                      // table数组
                pageSearch: jobPlanList,          // 分页查询api接口
                dialogForm: false,
                baseForm: {},
                checkStatus:'',
                showF:false
            }
        },
        mounted() {
            const route = this.$route.query
            if (route.type) {
                this.condition.search_EQ_planType = route.type
            }
            if (route.status) {
                if(route.status==='NOOPERATE,OPERATING'){
                    this.condition.search_IN_planStatus = 'NOOPERATE,OPERATING'
                    this.checkStatus=['NOOPERATE','OPERATING']
                }else{
                    this.condition.search_IN_planStatus = route.status
                    this.checkStatus=[route.status]
                }
            }
            if (route.mode) {
                this.condition.search_EQ_transportMode = route.mode
            }
            if(route.date){
                this.condition.search_GTE_planJobDate=route.date
                this.condition.search_LTE_planJobDate=route.date
            }
            if(route.dateType==='month'){
                let toMonth = mGetDate(new Date().getFullYear(), new Date().getMonth() + 1)
                this.condition.search_GTE_planJobDate=route.date
                this.condition.search_LTE_planJobDate=route.date.substr(0,8)+toMonth
            }
            this.loadData()
        },
        activated(){
            const route = this.$route.query
            if (route.type) {
                this.condition.search_EQ_planType = route.type
            }
            if (route.status) {
                if(route.status==='NOOPERATE,OPERATING'){
                    this.condition.search_IN_planStatus = 'NOOPERATE,OPERATING'
                    this.checkStatus=['NOOPERATE','OPERATING']
                }else{
                    this.condition.search_IN_planStatus = route.status
                    this.checkStatus=[route.status]
                }
            }
            if (route.mode) {
                this.condition.search_EQ_transportMode = route.mode
            }
            if(route.date){
                this.condition.search_GTE_planJobDate=route.date
                this.condition.search_LTE_planJobDate=route.date
            }
            this.loadData()
        },
        methods: {
            loadData() {
                this.$refs.jobTable.loadData()
            },
            handleGetDetail(id, y) {
                this.showF = (y && y===3)
                this.dialogForm = true
                this.getBaseInfo(id)
            },
            getBaseInfo(id) {
                jobPlanBaseInfo(id).then(res => {
                    this.baseForm = res.data
                    // this.$refs.table.condition['search_EQ_planType'] = ''
                    // this.$refs.table.condition['search_EQ_transportMode'] = ''
                    this.$refs.table.condition['search_EQ_planNo'] = res.data.planNo
                    // if (res.data.planType) {
                    //     this.$refs.table.condition['search_EQ_planType'] = res.data.planType
                    // }
                    // if (res.data.transportMode) {
                    //     this.$refs.table.condition['search_EQ_transportMode'] = res.data.transportMode
                    // }
                    this.$refs.table.loadData()
                })
            },
            handelCall(item){
                callJNInYard(item.planNo).then(res=>{
                    console.log(res);
                    let msg='推送成功!'
                    let type='success'
                    let data=res.data.aaData
                    for (let i = 0; i < data.length; i++) {
                        const element = data[i];
                        if(element.state!=='0'){
                            msg=element.message
                            type="error"
                        }
                    }
                    this.$message({ message: `${msg}`, type: `${type}` })
                    this.loadData()
                })
            },
            chooseStatus() {
                let a = ''
                this.condition['search_IN_planStatus'] = ''
                for (let index = 0; index < this.checkStatus.length; index++) {
                    this.condition['search_IN_planStatus'] = this.condition['search_IN_planStatus'] + ',' + this.checkStatus[index]
                }
            },
            handleRemove(row) {
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delPlan(row.planNo).then(res => {
                        this.$message({ message: '删除成功!', type: 'success' })
                        this.loadData()
                    })
                })
            }
        },
        computed: {
            isTransport() {
                return this.$route.query.type === 'TXJH' || this.$route.query.type === 'JCJH'
            }
        },
        // watch:{
        //     '$route' (to, from) {
        //         console.log(to)
        //     }
        // }
    }
</script>

<style scoped>
.hai{
    width: 100;
}
.hi{
    display: block;
}
</style>
